<template>
	<div class="editor-container">
		<div class="main-content-warp h100">
			<div class="main-editor" :style="{width: `${terminalContent.width}px`}">
				<EditorPanel ref="editorPanelRef"></EditorPanel>
			</div>
		</div>
	</div>
</template>

<script lang="ts">
	import { ref, toRefs, reactive, onMounted, computed } from 'vue';
	import { useStore } from '/@/store/index';
	import { useRoute } from 'vue-router';
	import { getWebTerminal } from '/@/api/dragdesign/terminal/index';
	
	import EditorPanel from '/@/views/decorator/components/index.vue';
	
	export default {
		name: 'decorator',
		components: {
			EditorPanel,
		},
		setup() {
			const editorPanelRef = ref();
			const store = useStore();
			const route = useRoute();
			const state = reactive({
				editorId: '',
				posterId: '',
				terminal: 1,
				terminalContent: {},
				activeComponent: {},
				componentsData: [],
			});
			
			state.terminal = computed(() => store.state.decorator.terminal);
			state.terminalContent = computed(() => store.state.decorator.terminalContent);
			state.activeComponent = computed(() => store.state.decorator.activeComponent);
			state.componentsData = computed(() => store.state.decorator.componentsData);

			const setTerminal = (terminal) => {
				store.dispatch('decorator/setTerminal', terminal);
			};
			const setTerminalContent = (terminalContent) => {
				store.dispatch('decorator/setTerminalContent', terminalContent);
			};
			const setComponentsData = (componentsData) => {
				store.dispatch('decorator/setComponentsData', componentsData);
			};
			
			onMounted(async () => {
				let terminal = 1;
				let terminalContent = {};
				let componentsData = [];
				await getWebTerminal({id : route.query.id, posterId: route.query.posterId}).then(res => {
					if(res.code === 0 && res.data){
						state.editorId = res.data.id;
						state.posterId = res.data.posterId;
						terminal = res.data.terminal;
						terminalContent = JSON.parse(res.data.terminalContent);
						componentsData = JSON.parse(res.data.terminalComponent);
					}
				});
				setTerminal(terminal);
				setTerminalContent(terminalContent ? JSON.parse(JSON.stringify(terminalContent)) : {});
				setComponentsData(componentsData ? JSON.parse(JSON.stringify(componentsData)) : []);
				state.terminalContent.viewed = true;
				document.title = state.terminalContent.title;
			});

			return {
				editorPanelRef,
				...toRefs(state),
			};
		},
	}
</script>

<style lang="scss" scoped>
	.editor-container {
		.main-content-warp {
			flex: 1;
			background-color: #ffffff;
			overflow-y: auto;
			scrollbar-width: thin;
			.main-editor {
				margin: 0 auto;
				max-width: 100%;
				height: 100vh;
			}
		}
	}
</style>
